<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="../csss/base.css" />
		<link rel="stylesheet" type="text/css" href="../csss/index.css" />
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2670729_3xqgoexgrze.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/Base.js"></script>
		<script src="../js/echarts.min.js"></script>
		<!-- <script src="../js/chinageo.js"></script> -->
		<script src="../js/chars.js"></script>
		<script src="../js/d3geo.js"></script>
	</head>
	<body>
		<div class="bg">
			<canvas id="canvas_bg"></canvas>
			<canvas id="canvas_circle" width="200px" height="200px" style="width:200px;height: 200px;"></canvas>
		</div>
		<div id="containt">

			<!-- 左侧 -->
			<div class="left">
				<!-- 左侧内容 -->
				<div class="left_view">
					<!-- 菜单 -->
					<div class="left_view_title">
						<img src="../static/zhuangshi.png" />
						<div>出入库数据</div>
					</div>
					<!--内容数据 -->
					<div class="left_view_con" id="in_out_ware">
					</div>
					<div style="height: 20px;"></div>
					<!-- 设备状态 -->
					<div class="left_view_conall">
						<!--  -->
						<div class="left_view_conitem">
							<div class="left_view_title">
								<img src="../static/zhuangshi.png" />
								<div>设备状态</div>
							</div>
							<div class="left_view_conitem_con">
								<canvas id="canvas_pad"></canvas>
							</div>
						</div>
						<div style="width: 5px;height: 1px;"></div>
						<div class="left_view_conitem">
							<div class="left_view_title">
								<img src="../static/zhuangshi.png" />
								<div>平台状态</div>
							</div>
							<div class="left_view_conitem_con">
								<div class="left_view_conitem_con_view">
									<canvas id="canvas_blue"></canvas>
								</div>
							</div>
						</div>
					</div>

					<div style="height: 20px;"></div>

					<!-- 菜单 -->
					<div class="left_view_title">
						<img src="../static/zhuangshi.png" />
						<div>连接状态</div>
					</div>
					<div class="left_view_conbot">
						<i class="iconfont icon-Sharingwuxianlanyagongxiang6" @click="onClick_restartData"></i>
						<div class="left_view_conbot_con">
							<span>STATUS</span>
							<span
								@click="onClick_ReConnect()">{{statusIndex == 9?'连接断开点击重试':(statusIndex==7?'连接完成':Base.bluetoothStatus[statusIndex])}}</span>
						</div>
					</div>
					<!-- <div style="height: 30px;"></div> -->
					<!-- <div style="flex: 1;"></div> -->
				</div>


			</div>
			<div style="width: 5px;"></div>
			<!-- 中间 -->
			<div class="content">
				<div class="content_top">
					<div class="content_top_view">
						<span>当前{{isReadPause?'暂停':'正在'}}进行的是{{isInwareHome?'入库':'出库'}}操作</span>
					</div>
					<i class="iconfont" :class="isReadPause?'icon-kaishi':'icon-zanting'"
						@click="onClick_PaseRead()"></i>
				</div>
				<div class="content_con">
					<!-- TODO 中间的动画 -->
					<canvas id="canvas_china"></canvas>
					<!-- <div class="map-container" id="chinamap"></div> -->

				</div>
				<div class="content_bottom">
					<div class="content_bottom_view">
						<span>出入库</span>
						<div id="circle_char" class="content_bottom_view_char"></div>
					</div>
					<div style="width: 15px;"></div>
					<div class="content_bottom_view">
						<span>功率比</span>
						<div id="gonglv_char" class="content_bottom_view_char"></div>
					</div>
					<div style="width: 15px;"></div>
					<div class="content_bottom_view">
						<span>频率比</span>
						<div id="pinlv_char" class="content_bottom_view_char"></div>
					</div>

					<div style="flex:1;"></div>
					<div class="content_bottom_view col" @click="onClick_isshowPorduct">
						<i class="iconfont icon-tianjia"></i>
						<p>添加产品</p>
					</div>
				</div>

			</div>
			<div style="width: 5px;"></div>
			<!-- 右侧 -->
			<div class="right">

				<!-- 产品内容 -->
				<div class="right_view">
					<!-- 标题 -->
					<div class="right_view_title">
						<span>全部产品</span>
						<img src="../static/zhuangshi_right.png" />
					</div>

					<!-- 内容 -->
					<div class="right_view_con">

						<div class="right_view_item" v-for="item,index in wareCards">
							<img :src="item.img" />
							<div class="right_view_item_txt">
								<span>{{item.name}}</span>
							</div>
							<span>{{item.status==0?"未入库":(item.status==1?'已入库':'已出库')}}</span>
						</div>


					</div>

				</div>

				<div style="height: 20px;"></div>
				<div class="right_view_title">
					<span>数据操作</span>
					<img src="../static/zhuangshi_right.png" />
				</div>

				<div style="height: 5px;"></div>
				<!-- 操作台 -->
				<div class="right_bottom">
					<div class="right_bottom_view">
						<div class="right_bottom_view_item" @click="onClick_setpinlv">
							<div class="right_bottom_view_item_view">
								<!-- {{readCard}} -->
								<canvas id="canvas_pin" min="1" max="1000" :progress="readCard"></canvas>
							</div>
							<span>设备频率</span>
						</div>
						<div style="width: 5px;"></div>
						<div class="right_bottom_view_item" @click="onClick_setPower">
							<div class="right_bottom_view_item_view">
								<!-- {{BlueToothPower}} -->
								<canvas id="canvas_power" min="0" max="6" :progress="BlueToothPower"></canvas>
							</div>
							<span>平台功率</span>
						</div>
					</div>
					<div style="height: 5px;"></div>
					<div class="right_bottom_view">
						<div class="right_bottom_view_item">
							<div class="right_bottom_view_item_can" @click="onClickisInOrOut">
								<canvas id="viewware">
								</canvas>

								<i v-show="!isReadPause" class="iconfont icon-truck-copy ware_car"
									:class="isInwareHome?'ware_car_InWare':'ware_car_OutWare'"></i>
								<i v-show="!isReadPause" class="iconfont icon-truck-copy ware_car"
									:class="isInwareHome?'ware_car_InWare':'ware_car_OutWare'"></i>
							</div>
						</div>
						<div style="width: 5px;"></div>
						<!-- 打开扫描页面 -->
						<div class="right_bottom_view_item" @click="onScanStartBlue">
							<i class="iconfont icon-saomiao"></i>
							<span>重新扫描设备</span>
						</div>
					</div>
				</div>
				<!-- <div style="flex: 1;"></div>	 -->
			</div>

			<!-- 扫描的页面 -->
			<div class="scanblueView" v-show="isshowScanView">
				<div class="scanblueview_con">

					<div class="other_scan startbtn" v-for="item in scanData"
						:style="{left:item.randX+'px',top:item.randY+'px'}" @click="onClick_gotoConnect(item.address)">
						{{item.name}}
					</div>

					<!-- 扫描涟漪 -->
					<div class="scan_circle_s" :class="isscan?'scan_circle_s_ani':''"></div>
					<!-- 中间 -->
					<div class="scan_view">
						<div class="scan-line " :class="isscan?'scan-line-anima':'scan-line-anima-hide'"></div>
						<div class="scan-circle "></div>
					</div>

					<div class="closeview" @click="onClickCloseScan">
						<i class="iconfont icon-guanbi"></i>
					</div>
					<div @click="testrand">测试添加</div>
				</div>
			</div>

			<!-- 添加产品的页面 -->
			<div class="addProView" v-show="isshowAddProduct">
				<div class="proview_con">
					<!-- 卡号 -->
					<div class="proview_contain">
						<span>卡&#12288;&#12288;号:</span>
						<span>{{addproductObj.card}}</span>
					</div>
					<!-- 名称 -->
					<div class="proview_contain">
						<span>产品名称:</span>
						<input class="proname" type="text" placeholder="名称" v-model="addproductObj.name" />
					</div>
					<!-- 卡图片 -->
					<div class="proview_contain">
						<span>选择图片:</span>
						<div class="select_img" @click="onClick_SelectImage">
							<i v-show="addproductObj.img==''" class="iconfont icon-jiahao"></i>
							<img v-show="addproductObj.img!=''" :src="addproductObj.img" />
						</div>
					</div>

					<div class="proview_contain btn">
						<div style="flex: 1;"></div>
						<input type="button" value="取消" @click="onClick_cancleAddProduct" />
						<div style="flex: 1;"></div>
						<input type="button" value="添加" @click="onClick_sureAddProduct" />
						<div style="flex: 1;"></div>
					</div>

				</div>
				<div class="closeview" @click="onClick_isshowPorduct">
					<i class="iconfont icon-guanbi"></i>
				</div>
			</div>

			<!-- 图片选择的页面 -->
			<div class="showImageSelect" v-show="isshowImageSelect">
				<div class="imageSelect_contain">
					<img v-for="item in allImageUrl" v-key="item" :src="item" @click="onClick_selectImage(item)" />
				</div>
				<div class="closeview" @click="onClick_SelectImage">
					<i class="iconfont icon-guanbi"></i>
				</div>
			</div>

			<!-- 出入库的页面 -->
			<div class="inoutwareview inoutani" v-for="item,index in createCardData" v-key="item.card">
				<img :src="item.img" />
				<span>卡号:{{item.card}}</span>
				<span>产品:{{item.name}}</span>
				<span>状态:{{item.status==1?'产品入库':'产品出库'}}</span>
			</div>

			<!-- 设置功率 -->
			<div class="showpowerview" v-show="isshowSetPower" :style="{
				top:setPowPinlvY + 'px'
				}">
				<span>功率:{{BlueToothPower}}</span><input type="range" v-model="BlueToothPower" max="6" min="1"
					step="1" />
			</div>

			<!-- 设置频率 -->
			<div class="showpowerview" v-show="isshowsetPinlv" :style="{
				top:setPowPinlvY + 'px'
				}">
				<span>速率:{{readCard}}</span><input type="range" v-model="readCard" max="1000" min="10" step="10" />
			</div>




		</div>
		<script src="../js/can_china.js"></script>
		<script src="../js/can_car.js"></script>
		<script src="../js/can_dial.js"></script>
		<script src="../js/waredata.js"></script>
		<script src="../js/can_circle.js"></script>
		<script src="../js/can_pad.js"></script>
		<script src="../js/can_blue.js"></script>
		<script src="../js/dustAni.js"></script>
		<script src="../js/animation.js"></script>
		<script src="../js/index.js"></script>
		<!-- 用于地理位置逆解析 -->
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=PvVAg4OwlHk3HVnwSRACMXrTaRS2PWOm"></script>
	</body>
</html>
